<script setup lang="ts">

import {ref} from "vue";
import {register} from "@/api/loginAndRegister";
import {Toast} from "vant";
import router from "@/router";



const username = ref("");
const password = ref("");
const checkPassword = ref("");
const nickname = ref("");
const longitude = ref<number>();
const latitude = ref<number>();

// 校验函数：4-10位字母或数字
const validateAccount = (val: string) => /^[a-zA-Z0-9]{4,10}$/.test(val);

// 校验函数：用户名长度不超过10位
const validateNickname = (val: string) => val.length <= 10;

// 校验函数：经度范围(-180~180)且为整数
const validateLongitude = (val: number) =>
    Number.isInteger(val) && val >= -180 && val <= 180;

// 校验函数：纬度范围(-90~90)且为整数
const validateLatitude = (val: number) =>
    Number.isInteger(val) && val >= -90 && val <= 90;

// 校验函数：确认密码与密码一致
const validatePasswordMatch = (val: string) =>
    val === password.value;

const onSubmit = async (values) => {
  await router.push({
    path: '/user/registerTags',
    state: {
      registerData: {
        username: username.value,
        password: password.value,
        checkPassword: checkPassword.value,
        nickname: nickname.value,
        longitude: longitude.value,
        latitude: latitude.value
      }
    }
  });
};
</script>

<template>
  <van-nav-bar
      title="注册"
      left-arrow
      @click-left="router.push('/user/login')"
  />

  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="username"
          type="text"
          name="账号"
          label="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, message: '请输入账号' },
          { validator: (val) => validateAccount(val), message: '账号必须为4-10位字母或数字' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' },
          { validator: (val) => validateAccount(val), message: '密码必须为4-10位字母或数字' }]"
      />
      <van-field
          v-model="checkPassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="请再输入一遍密码"
          :rules="[{ required: true, message: '请再输入一遍密码' },
          { validator: (val) => validateAccount(val), message: '密码必须为4-10位字母或数字' },
          { validator: (val) => validatePasswordMatch(val), message: '两次密码不一致' }]"
      />
      <van-field
          v-model="nickname"
          type="text"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' },
          { validator: (val) => validateNickname(val), message: '用户名长度不能超过10位' }]"
      />
      <van-field
          v-model.number="longitude"
          type="number"
          name="经度"
          label="经度"
          placeholder="请输入经度(-180~180)"
          :rules="[{ required: true, message: '请输入经度(-180~180)' },
          { validator: (val) => validateLongitude(val), message: '经度为-180~180的整数' }]"
      />
      <van-field
          v-model.number="latitude"
          type="number"
          name="纬度"
          label="纬度"
          placeholder="请输入纬度(-90~90)"
          :rules="[{ required: true, message: '请输入纬度(-90~90)' },
          { validator: (val) => validateLatitude(val), message: '纬度为-90~90的整数' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>

<style scoped>
:deep(.van-nav-bar__title) {
  font-weight: bold; /* 加粗 */
}

</style>
